<template>
  <div class="product">
    <div class="page_top">
      <div class="top_info">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item >首页</el-breadcrumb-item>
          <el-breadcrumb-item>产品管理</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="info_title">产品管理</div>
      </div>
      <div class="add" v-if="showTabs=='1'" @click="$router.push('/proAdd')">
        <span class="htd_add">+</span>
        <span>添加产品</span>
      </div>
      <div class="add" v-else-if="showTabs=='2'" @click="addType">
        <span class="htd_add">+</span>
        <span>添加类别</span>
      </div>
    </div>
    <div class="page_tabs">
      <el-tabs v-model="showTabs" @tab-click="switchBrand">
        <el-tab-pane label="产品列表" name="1">
          <proList ref="proList"></proList>
        </el-tab-pane>
        <el-tab-pane label="产品类别" name="2">
          <proType ref="proType"></proType>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters, mapMutations } from "vuex";  //vuex得各个方法   mapGetters放在computed里面 之后可以在当前页面用 this.userInfo 使用这个全局变量
import proList from './subpage/pro-list'
import proType from './subpage/pro-type'
export default {
  name: "product",
  data(){
    return {
      showTabs:'1',
    }
  },
  components:{
    proList,
    proType
  },
  created(){
    this.changeTab();
  },
  computed:{  
    ...mapGetters({
     
    }),
    
  },
  methods:{
    changeTab() {
      let query = this.$route.query;     //通过给路由添加type参数 来判断当前选项卡位置,防止用户刷新或者转发链接之后一直在第一个选项卡页面
      if (query && query.type && query.type === "prolist") {
        this.showTabs = "1";
      } else if (query && query.type && query.type === "proType") {
        this.showTabs = "2";
      }
    },
    switchBrand(tab) {
      //通过给路由添加type参数 来判断当前选项卡位置,防止用户刷新或者转发链接之后一直在第一个选项卡页面
      if (tab.name === "1") {
        this.$router.push(`${this.$route.path}?type=prolist`);
        this.$refs.proList.init();
      } else if (tab.name === "2") {
        this.$router.push(`${this.$route.path}?type=proType`);
        this.$refs.proType.init();
      }
    },
    addType(){
      this.$refs.proType.addType();
    },
  },
}
</script>
<style lang="scss" scoped>
.product{

}
</style>